<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var url = "";
function newObject(){
	$("#dlg").dialog("open").dialog("setTitle","Open dialog add new");
	$("#fm").form("clear");
	url = "TaiKhoanServlet?flag=add";
}
	
function editObject(){
	var row = $("#tt").datagrid("getSelected");
	if (row){
		$("#dlgEdit").dialog("open").dialog("setTitle","Open dialog edit");
		$("#fmEdit").form("load",row);
		url = "TaiKhoanServlet?flag=edit";
	} else {
		alert("Bạn chưa chọn dữ liệu cần cập nhật！");
	}
}

function changePass(){
	var row = $("#tt").datagrid("getSelected");
	if (row){
		$("#dlgPass").dialog("open").dialog("setTitle","Open dialog edit");
		$("#fmPass").form("load",row);
		url = "TaiKhoanServlet?flag=changepass";
	} else {
		alert("Bạn chưa chọn dữ liệu cần cập nhật！");
	}
}
	
function searchObject(){
	$('#tt').datagrid('load',{
		searchTen: $('#searchTen').val(),
	});
}
	
function removeObject(){
	var row = $("#tt").datagrid("getSelected");
	var user = document.getElementById("username").value;
	var u = row.ten_dang_nhap;
	if(u == user){
		alert("Bạn đang đăng nhập nên không thể xóa！");
	}else if (row){
		$.messager.confirm("Confirm","Bạn muốn xóa mẩu tin này?",function(r){
		if (r){
			$.post("TaiKhoanServlet?flag=remove", {
					id : row.id_nguoi_dung
				}, function(result) {
					if (result.success) {
							$("#tt").datagrid("reload"); // reload the user data
							$.messager.show({
								title: "Delete",
								msg: result.msg
							});
					} else {
						$.messager.show({
							title: "Error !",
							msg: result.msg
						});
					}
				}, "json");
			}
		});
	}else {
		alert("Bạn chưa chọn dữ liệu cần xóa！");
	}
}
	
function saveObject(){
	$("#fm").form("submit",{
		url: url,
		onSubmit: function(){
			return $(this).form("validate");
		},
		success: function(result){
			var r = eval("("+result+")");
			if (r.success){
				$("#dlg").dialog("close"); // close the dialog
				$("#tt").datagrid("reload"); // reload the user data
				$.messager.show({
					title: "Update",
					msg: r.msg
				});
			} else {
				$.messager.show({
					title: "Error !",
					msg: r.msg
				});
			}
		}
	});
}

function saveEditObject(){
	$("#fmEdit").form("submit",{
		url: url,
		onSubmit: function(){
			return $(this).form("validate");
		},
		success: function(result){
			var r = eval("("+result+")");
			if (r.success){
				$("#dlgEdit").dialog("close"); // close the dialog
				$("#tt").datagrid("reload"); // reload the user data
				$.messager.show({
					title: "Update",
					msg: r.msg
				});
			} else {
				$.messager.show({
					title: "Error !",
					msg: r.msg
				});
			}
		}
	});
}

function savePassObject(){
	$("#fmPass").form("submit",{
		url: url,
		onSubmit: function(){
			return $(this).form("validate");
		},
		success: function(result){
			var r = eval("("+result+")");
			if (r.success){
				$("#dlgPass").dialog("close"); // close the dialog
				$("#tt").datagrid("reload"); // reload the user data
				$.messager.show({
					title: "Update",
					msg: r.msg
				});
			} else {
				$.messager.show({
					title: "Error !",
					msg: r.msg
				});
			}
		}
	});
}

jQuery(function(){
	$("#searchTen").autocomplete("search/searchTaiKhoan.jsp");
});

// check match password with pre_password  
$.extend($.fn.validatebox.defaults.rules, {  
    equals: {  
        validator: function(value,param){  
            return value == $(param[0]).val();  
        },  
        message: 'Mật khẩu không khớp.'
    }  
});

// check length of String  hoặc dùng trực tiếp = lệnh data-options="required:true,validType:'length[5,20]'"
$.extend($.fn.validatebox.defaults.rules, {  
    minLength: {  
        validator: function(value, param){  
            return (value.length >= param[0] && value.length <= param[1]);  
        },  
        message: 'Nhập từ {0} đến {1} ký tự.'  
    }  
});  
</script>
<script type="text/javascript">
    var xmlHttp=null;
    function getXMLHttpRequest()
    {
    	try
    	{
    		xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
    	}
    	catch (ex)
    	{
    		try
    		{
    			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//Explorer 6.0+
    		}
    		catch (ex)
    		{
    			try
    			{
    				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//Explorer 5.5+
				} catch (ex) {
					return false;
				}
			}
		}
		return xmlHttp;
	}
	function checkTenDangNhap(ten_dang_nhap) {
		xmlHttp = getXMLHttpRequest();
		var msg = document.getElementById("maMessage");
		if (xmlHttp != null) {
			xmlHttp.onreadystatechange = function() {
				if (xmlHttp.readyState == 4) {
					if (xmlHttp.status == 200) {
						var check = xmlHttp.responseText;
						if (check == 0) {
							msg.innerHTML = "";
							document.getElementById("dlg-buttons").style.visibility = "visible";
						} else if (check == 1) {
							msg.innerHTML = "Tên đăng nhập đã tồn tại";
							document.getElementById("dlg-buttons").style.visibility = "hidden";
						};
					} else {
						msg.innerHTML = "Server đang bận ...";
					}
				} else {
					msg.innerHTML = "Đang kiểm tra ...";
				};
			};
			var url = "view/checkTaiKhoan.jsp?ten_dang_nhap=" + ten_dang_nhap + "&id=" + Math.random();
			xmlHttp.open("GET", url, true);
			xmlHttp.send(null);
		} else {
			alert("Trình duyệt không hỗ trợ Ajax");
			return false;
		}
	}
	
	function checkMaNguoiDung(ma_nguoi_dung) {
		xmlHttp = getXMLHttpRequest();
		var msg = document.getElementById("maMessage1");
		if (xmlHttp != null) {
			xmlHttp.onreadystatechange = function() {
				if (xmlHttp.readyState == 4) {
					if (xmlHttp.status == 200) {
						var check = xmlHttp.responseText;
						if (check == 0) {
							msg.innerHTML = "";
							document.getElementById("dlg-buttons").style.visibility = "visible";
						} else if (check == 1) {
							msg.innerHTML = "Mã người dùng đã tồn tại";
							document.getElementById("dlg-buttons").style.visibility = "hidden";
						};
					} else {
						msg.innerHTML = "Server đang bận ...";
					}
				} else {
					msg.innerHTML = "Đang kiểm tra ...";
				};
			};
			var url = "view/checkTaiKhoan1.jsp?ma_nguoi_dung=" + ma_nguoi_dung + "&id=" + Math.random();
			xmlHttp.open("GET", url, true);
			xmlHttp.send(null);
		} else {
			alert("Trình duyệt không hỗ trợ Ajax");
			return false;
		}
	}
</script>
<style type="text/css">
#fm {
	margin: 0;
	padding: 5 0px;
}

.ftitle {
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.fitem {
	margin-bottom: 7px;
}

.fitem label {
	display: inline-block;
	width: 170px;
}

.fitem input {
	display: inline-block;
	width: 290px;
	background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #888888;
    border-radius: 5px 5px 5px 5px;
    color: #222222;
    margin: 0 5px 0 0;
    padding: 3px 3px;
}
</style>
</head>
<body>
	<table id="tt" class="easyui-datagrid" style="width:795px; height:574px"
			url="TaiKhoanServlet"
			title=":: TÀI KHOẢN" toolbar="#tb"
			rownumbers="true" pagination="true" singleSelect="true" fitColumns="true">
		<thead>
			<tr>
				<th field="ma_nguoi_dung">Mã Người Dùng</th>
				<th field="ten_nguoi_dung">Tên Người Dùng</th>
				<th field="ten_dang_nhap">Tên Đăng Nhập</th>
				<th field="nhom_nguoi_dung">Nhóm Người Dùng</th>
			</tr>
		</thead>
	</table>
	
	<div id="tb" style="padding:5px">
		<div>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newObject()">Thêm</a> 
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editObject()">Sửa</a> 
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeObject()">Xóa</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-change" plain="true" onclick="changePass()">Đổi Mật Khẩu</a>
		</div>
		<div style="padding:5px">
			<input class="search" id="searchTen" name="searchTen" type="text" placeholder="nhập tên người dùng cần tìm">
			<a href="#" class="easyui-linkbutton" iconCls="icon-searchs" plain="true" onclick="searchObject()">Tìm Kiếm</a>
			<input type="hidden" id="username" name="username" value="${user}" class="easyui-validatebox">
		</div>
	</div>
	
	<!-- dialog add new TaiKhoan -->
	<div id="dlg" class="easyui-dialog" style="width: 550px; height: 320px; padding: 10px 20px" closed="true"
		buttons="#dlg-buttons">
		<div class="ftitle">THÊM NGƯỜI DÙNG MỚI </div>
		<form id="fm" method="post">
			<div class="fitem" >
				<input type="hidden" name="id_nguoi_dung" class="easyui-validatebox">
			</div>
			
			<div class="fitem">
				<label>Mã Người Dùng:</label> 
				<input type="text" id="ma_nguoi_dung" name="ma_nguoi_dung" onblur="checkMaNguoiDung(this.value)" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem" style="margin-left: 175px;">
				<span id="maMessage1" style="color: red;"></span>
			</div>
			
			<div class="fitem">
				<label>Tên Người Dùng:</label> 
				<input type="text" name="ten_nguoi_dung" class="easyui-validatebox" required="true">
			</div>
			
			<div class="fitem">
				<label>Tên Đăng Nhập:</label> 
				<input type="text" id="ten_dang_nhap" name="ten_dang_nhap" onblur="checkTenDangNhap(this.value)" class="easyui-validatebox" data-options="required:true,validType:'minLength[5,20]'" placeholder="nhập từ 5 -> 20 ký tự">
			</div>
			<div class="fitem" style="margin-left: 175px;">
				<span id="maMessage" style="color: red;"></span>
			</div>
			
			<div class="fitem">
				<label>Mật Khẩu:</label> 
				<input type="password" name="mat_khau" id="mat_khau" class="easyui-validatebox" data-options="required:true,validType:'minLength[5,20]'" placeholder="nhập từ 5 - > 20 ký tự">
			</div>
			
			<div class="fitem">
				<label>Nhập Lại Mật Khẩu:</label> 
				<input type="password" name="nhap_lai_mat_khau" class="easyui-validatebox" required="true" 
						validType="equals['#mat_khau']">
			</div>
			
			<div class="fitem">
				<label>Nhóm Người Dùng:</label> 
            	<select id="cc" class="easyui-combobox" name="nhom_nguoi_dung" required="true" panelHeight="250" style="width:300px; height: 25px">  
				    <option value="Quản Trị">Quản Trị</option>  
				    <option value="Giảng Viên">Giáo Viên</option>  
				    <option value="Cán Bộ">Cán Bộ</option>
				</select>
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveObject()">Lưu</a> 
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Hủy Bỏ</a>
	</div>

	<!-- dialog edit TaiKhoan -->
	<div id="dlgEdit" class="easyui-dialog" style="width: 550px; height: 205px; padding: 10px 20px" closed="true"
		buttons="#dlg-buttons-edit">
		<div class="ftitle">CẬP NHẬT NGƯỜI DÙNG</div>
		<form id="fmEdit" method="post">
			<div class="fitem" >
				<input type="hidden" name="id_nguoi_dung" class="easyui-validatebox">
			</div>

			<div class="fitem">
				<label>Mã Người Dùng:</label> 
				<input type="text" readonly="readonly" name="ma_nguoi_dung" class="easyui-validatebox" required="true">
			</div>
			
			<div class="fitem">
				<label>Tên Người Dùng:</label> 
				<input type="text" name="ten_nguoi_dung" class="easyui-validatebox" required="true" >
			</div>
	
			<div class="fitem">
				<label>Nhóm Người Dùng:</label> 
            	<select id="cc" class="easyui-combobox" name="nhom_nguoi_dung" required="true" panelHeight="250" style="width:300px; height: 25px">  
				    <option value="Quản Trị">Quản Trị</option>  
				    <option value="Giảng Viên">Giáo Viên</option>  
				    <option value="Cán Bộ">Cán Bộ</option>
				</select>
			</div>
		</form>
	</div>
	<div id="dlg-buttons-edit">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveEditObject()">Lưu</a> 
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlgEdit').dialog('close')">Hủy Bỏ</a>
	</div>
	
	<!-- dialog edit MatKhau -->
	<div id="dlgPass" class="easyui-dialog" style="width: 550px; height: 270px; padding: 10px 20px" closed="true"
		buttons="#dlg-buttons-pass">
		<div class="ftitle">CẬP NHẬT MẬT KHẨU</div>
		<form name="fmPass" id="fmPass" method="post">
			<div class="fitem" >
				<input type="hidden" name="id_nguoi_dung" class="easyui-validatebox">
			</div>

			<div class="fitem">
				<label>Mã Người Dùng:</label> 
				<input type="text" readonly="readonly" name="ma_nguoi_dung" class="easyui-validatebox" required="true">
			</div>
			
			<div class="fitem">
				<label>Tên Người Dùng:</label> 
				<input type="text" readonly="readonly" name="ten_nguoi_dung" class="easyui-validatebox" required="true">
			</div>
			
			<div class="fitem">
				<label>Mật Khẩu Cũ:</label> 
				<input type="password" name="mat_khau" class="easyui-validatebox" required="true">
			</div>
			
			<div class="fitem">
				<label>Mật Khẩu Mới:</label> 
				<input type="password" name="mat_khau_moi" id="mat_khau_moi" class="easyui-validatebox" data-options="required:true,validType:'minLength[5,20]'" placeholder="nhập từ 5 -> 20 ký tự">
			</div>
			
			<div class="fitem">
				<label>Nhập Lại Mật Khẩu:</label> 
				<input type="password" name="nhap_lai_mat_khau_moi" id="nhap_lai_mat_khau_moi" class="easyui-validatebox" required="true"
						validType="equals['#mat_khau_moi']">
			</div>

		</form>
	</div>
	<div id="dlg-buttons-pass">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="savePassObject()">Lưu</a> 
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlgPass').dialog('close')">Hủy Bỏ</a>
	</div>
	
	
</body>
</html>